import React from 'react'
import BaseComponent from '../../components/common/baseComponent'
import {
  View,
  FlatList
} from 'react-native'

import StyleSheet from '../../utils/rzStyleSheet'

import { connect } from 'react-redux'

import { callApi, toast } from '../../actions/app'

import Product from '../../components/bulk/product'

import {
  API_SEARCH_PRODUCTLIST
} from '../../constants/api'

import {
  UPDATE_PRODUCT_LIST
} from '../../constants/actionType'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  }
})

class Bulk extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'Bulk'
    this.state = {
      onRefresh: false
    }

    this.searchProduct = this.searchProduct.bind(this)
    this.searchDone = this.searchDone.bind(this)
    this.onRefresh = this.onRefresh.bind(this)
    this.onEndReached = this.onEndReached.bind(this)
  }

  componentWillMount () {
    this.searchProduct(0)
  }

  componentWillReceiveProps (nextProps) {
    console.log('===bulk  route==', this.props.nav.routes[0].index, nextProps.nav.routes[0].index)
  }

  searchDone () {
    this.setState({ onRefresh: false })
  }

  renderItem (item) {
    return (
      <Product
        product={item.item}
      />
    )
  }

  searchProduct (startNo, pageSize = 10) {
    const {
      dispatch,
      productCount,
      searchProductList
    } = this.props
    if (startNo === parseInt(productCount, 10)) {
      dispatch(toast('info', '已加载全部数据！'))
      return
    }
    this.setState({ onRefresh: true })
    searchProductList({
      startNo,
      cityId: 999,
      areaId: 3275,
      userId: 'bd0e764b7654490bab1c55b51694c476',
      alwaysBuy: 'frozen',
      productType: 1,
      pageSize: pageSize,
      isBulk: 1
    }, this.searchDone)
  }

  onRefresh () {
    this.searchProduct(0)
  }

  onEndReached () {
    const {
      productList
    } = this.props
    if (!this.state.onRefresh && productList.size >= 10) {
      this.searchProduct(productList.size)
    }
  }

  render () {
    const {
      onRefresh
    } = this.state
    return (
      <View style={styles.container}>
        <FlatList
          style={{ backgroundColor: '#999a92' }}
          data={this.props.productList.toArray()}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => item.id}
          onRefresh={this.onRefresh}
          refreshing={onRefresh}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={0}
        />
      </View>
    )
  }
}

Bulk.propTypes = {
}

Bulk.navigationOptions = {
  headerTitle: 'Bulk'
}

function mapStateToProps (state) {
  const { bulk, nav } = state
  const productList = bulk.get('productList')
  const productCount = bulk.get('count')
  return {
    nav,
    productCount,
    productList
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch,
    searchProductList: (params, done) => dispatch(callApi({
      api: API_SEARCH_PRODUCTLIST,
      body: params,
      success: UPDATE_PRODUCT_LIST,
      done
    }))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Bulk)
